html, body { height: 100%; }
body { color: #666;  background-color: #eee; }

.page { width: 100%; height: 100%; }

code { color: green; white-space: pre !important;}
.ace_doc-tooltip {
  white-space: normal !important; box-shadow: none !important;
  border: 1px solid #ccc !important; padding: 0 1em !important;
  background: #fafafa !important; font-size: 14px !important;
}
.ace_doc-tooltip pre { cursor: pointer !important; }
.ace_gutter-layer { width: 40px !important; }
.editor-navbar { margin-top: 5px; margin-left: 40px; }

/* DASHBOARD STYLES */
#breadcrumb, .devinfo { color: #BAB8B8; }
.popover { min-width: 580px; }
.dropdown-header { font-weight: bold; }
.dropdown-ports li { font-size: 14px; border: none !important; }
.dropdown-builds li { font-size: 14px; border: none !important; }
.tooltip-inner { max-width: 40em !important; }
.left_col.menu_fixed { top: 0; overflow-y: auto; }
.side-menu { margin-top: 0 !important;}
#top_nav { line-height: 32px; height: 32px; margin: 0 10px; border-bottom: 1px solid #ccc; position: relative; }
#breadcrumb { font-size: 20px; text-transform: capitalize !important; }
#devinfo { min-width: 15em; display: inline-block; }
#page { margin-left: 80px; margin-right: 1em; }
#d1 { display: flex; flex-direction: column; }
#app_view { flex: 0 0 auto; min-height: 200px; position: relative; }
#device-logs-panel { flex: 1 1 auto; }
.splitter-horizontal { height: 18px; background: #ccc; cursor: row-resize; margin: 0; }
.panel-title { margin: 5px 10px; }
#app_view .panel { padding: 0 1em; }
.main-left-column { height: 100%; padding: 0; margin: 0; }
.main-right-column { height: 100%; padding: 0; margin: 0; }
.stderr { color: #77e; font-weight: bold; }
.ui-pnotify { right: 22px; top: 82px; }
input.form-control { box-shadow: none !important; }
.block_content h2.title:before { margin-top: 10px !important; }
.block_content h2.title { margin-bottom: 10px !important; }
.tags { top: 15px !important;}
.modal-dialog { min-width: 640px; }
.greyed { background-color: #eee !important; }
.greyed:after { border-left-color: #eee !important; }
.btn-mos { background-color: #fafafa; }
.done { font-size: 120%; color: rgb(26, 187, 156); }
.green { color: #7f7; }
.red { color: #f77; }
.orange { color: #fa5; }
.yellow { color: #ff7; }
#doorbell-button { background: #5bc0de; }

/* CODE PAGE */
.descr { color: silver; }
.list-group-item.title { background-color: #eee; xbackground: rgb(42, 63, 84); xcolor: #eee;}
.list-group-item:not(.title) { cursor: pointer;}
.local-project.selected { background-color: #ffe; }
.local-project span { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis;  }
#file-dropdown, #arch-dropdown { font-family: Consolas, Menlo, Monaco, monospace; margin-top: -5px; }
#file-dropdown { width: 15em; }
#app-manager .modal-dialog, #lib-manager .modal-dialog { min-width: 760px !important; }
.category-title { text-align: center; text-transform: uppercase; border: 0 !important; background: #f0f0f0; }
.api_def {
  font-family: Consolas, Menlo, Monaco, monospace;
  white-space: pre; font-size: 14px; font-weight: bold; color: teal;
  margin-bottom: 1em; margin-top: 0.5em;
}

/* FILE MANAGER PAGE */
#file-list { overflow-y: auto; }
#file-textarea { font-family: Consolas, Menlo, Monaco, monospace; }
.upcontrol { position: absolute; top: 40px; bottom: 0; overflow-y: auto; width: 100%; left: 0; right: 0;}
.logs { height: 100%; font-size: 95%; overflow-y: auto; line-height: 1.2em; background: #fff; width: 100%; top: 0px !important;}
.editor { height: 100%; background: #fff; border-radius: 0.3em; }
.file .file-size { color: silver; }
.file.is_js { color: #ffa500; }
.file.is_json { color: #3cb371; }
.file.is_api { color: silver; }
.file.is_jsc { color: #f99; }
.file.selected { background: #f0f0f0; }

/* TERMINAL PAGE */
#terminal-output { background: #fff; border-radius: 0.3em; top: 54px; width: 100%;}
.terminal-cmd-in, .terminal-cmd-out { margin: 0 1em; color: #44c; white-space: pre; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace }
.terminal-cmd-in { color: #44c; font-weight: bold; }
.terminal-cmd-out { color: #777; overflow-y: auto; }

/* WIZARD STYLES */
.wizard .panel-body, .wizard .panel-footer { padding-left: 3em; padding-right: 3em; }
.tab-pane h3 { margin: 3em 0 1em; }
.step-image-div { background: #0e7cac; border-radius: 0.4em; min-height: 200px;}
.panel-footer { background-color: #fff; }
.navbar a.active { color: #000; font-weight: bold; }
.navbar a.active:hover { text-decoration: none; }
.wizard-image { height: 240px; max-width: 100%; }
.red { color: #f66 !important; }
#wizard-button-next, #wizard-button-prev { position: relative; }
#wizard-button-next.spinner, #wizard-button-prev.spinner { color: transparent; }
#main-title { margin: 0.5em 0; font-size: 30px; font-weight: 300; }
.link { cursor: pointer; }

/* COMMON STUFF */

.input-xs {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
  border-radius: 3px;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}

input, textarea, button,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: #ccc ;
  box-shadow: none;
  outline: 0 none !important;
}
